<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import { useBooleanStore } from '@/store';
  import { searchTaskCount, smSpmCallBle } from '@/api/sorting-matching';
  import { Notification } from '@arco-design/web-vue';

  const booleanStore = useBooleanStore();
  const hStyle = ref({
    'background-color': booleanStore.color,
    'border-radius': booleanStore.borderRadius,
  });
  const cardData = ref<any>('');

  async function handleSearch() {
    const data = await searchTaskCount('');
    cardData.value = data.responseBody;
  }
  // 虚拟配套计算
  async function callBle() {
    const data: any = await smSpmCallBle({});
    if (data.retCode === '200') {
      Notification.success({
        title: '成功',
        content: data.message,
        closable: true,
      });
    } else {
      Notification.error({
        title: '失败',
        content: data.message,
        closable: true,
      });
    }
    handleSearch();
  }
  onMounted(() => {
    handleSearch();
  });
</script>

<template>
  <a-card :header-style="hStyle" :bordered="false">
    <template #title>
      <div class="font">数据</div>
    </template>
    <a-row :gutter="{ md: 8, lg: 24, xl: 32 }">
      <a-col :span="12">
        <a-popconfirm
          content="确定要虚拟配套计算吗?"
          ok-text="确定"
          cancel-text="取消"
          @ok="callBle"
        >
          <a-button type="primary" size="large">虚拟配套计算</a-button>
        </a-popconfirm>

        <a-button type="primary" class="btn-reset" size="large"
          >工艺更改虚拟配套</a-button
        >
        <a-button type="primary" class="btn-reset" size="large"
          >配套导出Excel</a-button
        >
      </a-col>
    </a-row>
    <a-row class="margin-top" :gutter="{ md: 8, lg: 24, xl: 32 }">
      <a-col :span="8">
        <a-card>
          <template #title>
            <div class="title-font">工作包</div>
          </template>
          <div class="div-flex">
            <div>部分配套/完全配套/未配套/工作包总数</div>
            <div class="data-font"
              >{{ cardData.packagedLackCount }}/{{ cardData.packagedCount }}/{{
                cardData.packagedPartCount
              }}/{{ cardData.packageCount }}</div
            >
          </div>
        </a-card>
      </a-col>
      <a-col :span="8">
        <a-card>
          <template #title>
            <div class="title-font">AO</div>
          </template>
          <div class="div-flex">
            <div>部分配套/完全配套/未配套/AO总数</div>
            <div class="data-font">
              {{ cardData.aoedPartCount }}/{{ cardData.aoedCount }}/{{
                cardData.aoUnCount
              }}/{{ cardData.aoCount }}
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :span="8">
        <a-card>
          <template #title>
            <div class="title-font">缺配类型</div>
          </template>
          <div class="div-flex">
            <div>A类缺件/非A类缺件</div>
            <div class="data-font"
              >{{ cardData.aoCountA }}/{{ cardData.aoCountB }}</div
            >
          </div>
        </a-card>
      </a-col>
    </a-row>
  </a-card>
</template>

<style scoped>
  .margin-top {
    margin-top: 10px;
  }
  .btn-reset {
    margin-left: 10px;
  }
  .font {
    font-size: 20px;
    color: black;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
      Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
      sans-serif;
  }
  .title-font {
    font-size: 18px;
    font-weight: bold;
  }
  .div-flex {
    display: flex;
    flex-direction: column;
    align-items: end;
  }
  .data-font {
    margin-top: 5px;
    color: blue;
    font-size: 24px;
  }
</style>
